<template>
    <div class="container">
        <div class="login_box">
            <div class="logo">
                <img src="../assets/logo2.png" alt="">  
            </div>
            <!-- 登录表单 -->
            <el-form class="form_login" :model="loginForm" :rules="rules" ref="loginFormRef">
                <el-form-item prop="username">
                    <el-input placeholder="请输入账号" prefix-icon="iconfont icon-account" v-model="loginForm.username" clearable></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input placeholder="请输入密码" prefix-icon="iconfont icon-password" v-model="loginForm.password" show-password></el-input>
                </el-form-item>
                <!-- 按钮 -->
                <el-form-item class="login_btn">
                    <el-button type="primary" @click="submitForm">登录</el-button>
                    <el-button @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
import {login} from '@/config/api'
export default {
  name: 'Login',
  data(){
      return{
        loginForm:{
            username:'',
            password:''
        },
        rules:{
            username: [
                { required: true, message: '请输入账号', trigger: 'blur' },
                { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
            ],
            password: [
                { required: true, message: '请输入密码', trigger: 'change' },
                { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
            ],
        }
      }
  },
   methods: {
      submitForm() {
        this.$refs.loginFormRef.validate(valid => {
          if (valid) {
              //const result = await this.$http.post('login',this.loginForm);
              //console.log(result);
              login(this.loginForm).then(res => {
                  console.log(res)
                  this.$message.success("登录成功");
                  window.sessionStorage.setItem('token',res.token);
                  this.$router.push('/home');
                  
              }).catch(e => {
                  console.log('error',e)
                  this.$message.error(e.msg)
              })
          } else {
              this.$message.sucess("登录失败")
              console.log('error submit!!');
              return false;
          }
        });
      },
      resetForm() {
        this.$refs.loginFormRef.resetFields();
      }
    }
}
</script>
<style lang="less" scoped>
    .container{
        background-color:rgb(126, 169, 226);
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

    }
    .login_box{
        width: 450px;
        height: 300px;
        background-color: white;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        align-items: center;
        .logo{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 1px solid #eee;
            padding: 10px;
            box-shadow: 0 0 10px #ddd;
            background-color: white;
            margin-top: -40px;

            img{
                width: 100%;
                height: 100%;
                border-radius: 50%;
                background-color: #eee;
            }
        }
        .form_login{
            width: 268px;
            padding: 10px;
            .login_btn{
                width: 100%;
                display: flex;
                justify-content: center;
            }
        }
    }
</style>
